<template>
  <div
      :class="['divider', 'divider-'+props.direction]"
      :style="dividerStyle"
      role="separator"
  >
    <div
        v-if="$slots.default && props.direction !== 'vertical'"
        :class="['divider-text','divider-text-'+props.contentPosition]"
    >
      <slot />
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

defineOptions({
  name: 'ElDivider',
})
const props = defineProps({
  direction: {
    type: String,
    values: ['horizontal', 'vertical'],
    default: 'horizontal',
  },
  /**
   * @description Set the style of divider
   */
  contentPosition: {
    type: String,
    values: ['left', 'center', 'right'],
    default: 'center',
  },
  /**
   * @description the position of the customized content on the divider line
   */
  borderStyle: {
    type: String,
    values: ['solid', 'dashed', 'dotted','double','ridge','groove','inset','outset'],
    default: 'solid',
  },})

const dividerStyle = computed(() => {
  return {
    '--border-style': props.borderStyle,
  }
})
</script>
<style>
.divider-text{
  position: absolute;
  background-color: var(--bg-color,white);
  padding: 0 20px;
  font-weight: 500;
  font-size: 14px;
}
.divider-text-right{
  right: 20px;
  transform: translateY(-50%);
}
.divider-text-left{
  left: 20px;
  transform: translateY(-50%);
}
.divider-text-center{
  left: 50%;
  transform: translate(-50%) translateY(-50%);
}
.divider{
  position: relative;
}
.divider-horizontal{
  display: block;
  height: 1px;
  width: 100%;
  margin: 20px 0;
  border-top: 1px #eeeeee var(--border-style);
}
.divider-vertical{
  display: inline-block;
  width: 1px;
  height: 1em;
  margin: 0 8px;
  vertical-align: middle;
  position: relative;
  border-left: 1px #eeeeee solid;
}
</style>
